<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/HomeTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                >
    <ui:define name="body">

        <h:form id="form"> 
            <p:growl id="growl" showDetail="true"/>  
            <p:growl id="msgs" showDetail="true" />
            <p:dataTable id="dataTable" var="opCen" value="#{opCenBean.opCens}" selectionMode="single" selection="#{opCenBean.selectedOpCen}" rowKey="#{opCen.idOpCen}"
                         widgetVar="opCenTable" paginator="true"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks}
                         {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" paginatorPosition="bottom"
                         rows="10" rowsPerPageTemplate="10,20,40"
                         >  
                <f:facet name="header">
                    Operation Centers
                </f:facet>
                <p:ajax event="rowSelect" listener="#{opCenBean.onRowSelect}" update=":#{p:component('editPanel')}"  />
                <p:column >  
                    <f:facet name="header">  
                        Name
                    </f:facet> 

                    <h:outputText value="#{opCen.name}" />  

                </p:column>  

                <p:column >  
                    <f:facet name="header">  
                        Description
                    </f:facet> 

                    <h:outputText value="#{opCen.description}" />  

                </p:column>  

                <f:facet name="footer">  
                    In total there are #{opCenBean.opCens.size()} Items.  
                </f:facet>  

            </p:dataTable> 


            <h:panelGrid id="buttons" columns="5" cellpadding="4" style="border-bottom-width: 30px"> 
                <p:commandButton  value="Filter" icon="ui-icon-search"  ></p:commandButton> 
                <p:commandButton  value="Add" onclick="panelwv.show();" type="button"> </p:commandButton> 
                <p:commandButton  value="Update" onclick="panelwv.show();" type="button"> </p:commandButton> 
                <p:commandButton  value="Remove"  > </p:commandButton>   
                <p:commandButton  value="Excel" action="#{reporteController.submit()}" immediate="true" ajax="false"> </p:commandButton>  
            </h:panelGrid>

            <p:panel id="editPanel" header="Create Cen Op" widgetVar="panelwv" visible="false" style="width: 70%;">  

                <h:panelGrid id="editGrid" columns="3">  
                    <h:outputText value="Type Currency: *" /> 
                    <p:selectOneMenu id="curr" required="true" value="#{opCenBean.opCen.idTypeCurrency}" converter="#{typeCurrencyConverter}" style="width: 228px;">  
                        <f:selectItem itemLabel="Select Type Currency" itemValue="" />  
                        <f:selectItems value="#{typeCurrencyBean.typeCurrencys}" var="typeCurrency" itemLabel="#{typeCurrency.description}" itemValue="#{typeCurrency}"/>  
                    </p:selectOneMenu> 
                    <p:message id="defaultMessage" for="curr" />   

                    <h:outputText value="Cen Op Name: *" />   
                    <p:inputText id="nam" value="#{opCenBean.opCen.name}" required="true" label="Name"/>  
                    <p:message id="textOnlyMessage" for="nam" display="text" />  

                    <h:outputText value="Cen Op Description: *" />   
                    <p:inputText id="desc" value="#{opCenBean.opCen.description}" required="true" label="Description"/> 
                    <p:message id="textOnlyMessage2" for="desc" display="text" />  

                </h:panelGrid>  

                <p:commandButton value="Save" actionListener="#{opCenBean.saveOpCen()}" update="dataTable" ajax="false"/>

                <p:commandButton value="Cancel" update="editPanel" process="@this" actionListener="#{opCenBean.resetFail}"/>

            </p:panel>  

        </h:form>  


    </ui:define>
</ui:composition>